<template>
  <footer class="footer bg-yellow bg-shape">
    <div class="footer-upper pt-100 pb-70 position-relative">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="footer-content-item">
              <div class="footer-logo">
                <a href="#"
                  ><img :src="require('assets/images/logo.png')" alt="logo"
                /></a>
              </div>
              <div class="footer-details">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
                <ul class="footer-payment-list">
                  <li>
                    <a href="#">
                      <img
                        :src="
                          require('assets/images/american-express-sign.png')
                        "
                        alt="payment"
                      />
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img
                        :src="require('assets/images/cirrus.png')"
                        alt="payment"
                      />
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img
                        :src="require('assets/images/mastercard.png')"
                        alt="payment"
                      />
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-6 col-lg-3">
            <div
              class="footer-content-list footer-content-item desk-pad-left-70"
            >
              <div class="footer-content-title">
                <h3>About Us</h3>
              </div>
              <ul class="footer-details footer-list">
                <li>
                  <a href="#">Contact Us</a>
                </li>
                <li>
                  <a href="#">Terms &amp; Conditions</a>
                </li>
                <li>
                  <a href="#">Privacy &amp; Policy</a>
                </li>
                <li>
                  <a href="#">Latest Blogs</a>
                </li>
                <li>
                  <a href="#">Our Latest Shops</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-6 col-md-6 col-lg-3">
            <div
              class="footer-content-list footer-content-item desk-pad-left-70"
            >
              <div class="footer-content-title">
                <h3>Quick Links</h3>
              </div>
              <ul class="footer-details footer-list">
                <li>
                  <a href="#">FAQ</a>
                </li>
                <li>
                  <a href="#">Order Tracking</a>
                </li>
                <li>
                  <a href="#">Authentication</a>
                </li>
                <li>
                  <a href="#">My Cart</a>
                </li>
                <li>
                  <a href="#">My Wishlist</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-6 col-md-6 col-lg-3">
            <div
              class="footer-content-list footer-content-item desk-pad-left-70"
            >
              <div class="footer-content-title">
                <h3>Useful Links</h3>
              </div>
              <ul class="footer-details footer-list">
                <li>
                  <a href="#">New Arrivals</a>
                </li>
                <li>
                  <a href="#">About Us</a>
                </li>
                <li>
                  <a href="#">404 Error Page</a>
                </li>
                <li>
                  <a href="#">Coming Soon Page</a>
                </li>
                <li>
                  <a href="#">Search Page</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="footer-lower">
        <div class="footer-lower-item">
          <div class="footer-copyright-text">
            <p>Copyright © 2021.Company name All rights reserved.</p>
          </div>
        </div>
        <div class="footer-lower-item">
          <ul class="social-list">
            <li>
              <a href="#" target="_blank"><i class="flaticon-facebook"></i></a>
            </li>
            <li>
              <a href="#" target="_blank"><i class="flaticon-instagram"></i></a>
            </li>
            <li>
              <a href="#" target="_blank"><i class="flaticon-twitter"></i></a>
            </li>
            <li>
              <a href="#" target="_blank"><i class="flaticon-pinterest"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const refData = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
